<template>
<div>
    <div style="margin-top: 15px;">
  <el-input placeholder="请输入内容" style="width:30%" v-model="input3" class="input-with-select">
    <el-select v-model="select" slot="prepend" placeholder="请选择">
      <el-option label="商品名" value="1"></el-option>
      <el-option label="品类" value="2"></el-option>
    </el-select>
    <el-button slot="append" icon="el-icon-search"></el-button>
  </el-input>
    </div>
<el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="tname"
      label="商品名"
      width="100">
    </el-table-column>
    <el-table-column
      prop="ttype"
      label="品类"
      width="100">
    </el-table-column>
    <el-table-column
      prop="taddress"
      label="产地"
      width="120">
    </el-table-column>
    <el-table-column
      prop="tcreatedate"
      label="出厂日期"
      width="120">
    </el-table-column>
    <el-table-column
      prop="texpiration"
      label="保质期"
      width="120">
    </el-table-column>
    <el-table-column
      prop="tsupplier"
      label="供应商"
      width="120">
    </el-table-column>
    <el-table-column
      prop="tweight"
      label="包装规格"
      width="120">
    </el-table-column>
    <el-table-column
      prop="tprice"
      label="价格"
      width="120">
    </el-table-column>
     <el-table-column
      label="操作"
      width="200">
      <template slot-scope="scope">
        
        <el-button @click="checkRow(scope.$index,tableData)"
          type="text" size="small">查看</el-button>    
        <el-button type="text" size="small">修改</el-button>
        <el-button
          @click.native.prevent="deleteRow(scope.$index, tableData)"
          type="text"
          size="small">
          移除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-row>
  <el-button type="primary">添加商品</el-button>
</el-row>
  <el-pagination
  background
  layout="prev, pager, next"
  :total="1000">
</el-pagination>
</div>


</template>

<script>
import {getAllItems} from '@/services/ItemService'
import {deleteItem} from '@/services/ItemService'

export default {
    methods:{
      deleteRow(index, rows) {        
        let resp=rows[index]       
        console.log(resp.tid);
        rows.splice(index, 1);
        deleteItem(resp.tid);
      },
      checkRow(index,rows) {
        this.$router.push({path:'/checkItem'})
        let resp = rows[index]
        console.log(resp.tid)
      }
    },
    async created() {
        this.tableData = await getAllItems();
    },
    data() {
        return {
        input1: '',
        input2: '',
        input3: '',
        select: '',
        tableData: []
      }
        }
        
  }

</script>

<style>

.el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>